<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "TimeRangeLines",
    data() {
        return {
            options: {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '8%',
                    top: '20%',
                    containLabel: true
                },

                legend: {
                    left: 'center',
                    align: 'left',
                    top: '6%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: true
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#fff',
                        textStyle: {
                            color: '#FEFEFE',
                            fontSize: '16'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: [
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月',
                        '1月',
                        '2月',
                        '3月',
                    ],

                }],

                yAxis: [{
                    type: 'value',
                    min: 0,
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#FEFEFE',
                            fontSize: '16'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [{
                    name: '全流程办案率',
                    type: 'line',
                    symbol: 'none',
                    smooth: true, //是否平滑
                    lineStyle: {
                        normal: {
                            color: "rgb(86, 127, 206)",
                        },
                    },
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: true
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgb(86, 127, 206)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(86, 127, 206,0)'
                            }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    data: [21.55, 39.35, 21.02, 17.55, 28.57, 36.14, 28.57, 35.14]
                },
                {
                    name: '电子送达率',
                    type: 'line',
                    smooth: true, //是否平滑
                    symbol: 'none',
                    lineStyle: {
                        normal: {
                            color: "rgb(36, 223, 74)",
                        },
                    },
                    label: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    itemStyle: {
                        color: "rgb(36, 223, 74)",
                    },
                    tooltip: {
                        show: true
                    },

                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgb(36, 223, 74)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 209, 39,0)'
                            }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    data: [81.55, 98.35, 14.02, 79.55, 29.57, 6.14, 29.57, 56.14],
                },
                {
                    name: '单套归档率',
                    type: 'line',
                    smooth: true, //是否平滑
                    symbol: 'none',
                    lineStyle: {
                        normal: {
                            color: "rgb(235, 237, 237)",
                        },
                    },
                    label: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    itemStyle: {
                        color: "rgb(235, 237, 237)",
                    },
                    tooltip: {
                        show: true
                    },

                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgb(235, 237, 237)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(235, 237, 237,0)'
                            }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    data: [11.55, 68.35, 24.02, 79.55, 59.57, 6.14, 29.57, 16.14],
                },
                {
                    name: '数字庭审率',
                    type: 'line',
                    smooth: true, //是否平滑
                    symbol: 'none',
                    lineStyle: {
                        normal: {
                            color: "rgb(167, 37, 53)",
                        },
                    },
                    label: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    itemStyle: {
                        color: "rgb(167, 37, 53)",
                    },
                    tooltip: {
                        show: true
                    },

                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgb(167, 37, 53)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(167, 37, 53,0)'
                            }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    data: [81.55, 68.35, 94.02, 79.55, 59.57, 6.14, 69.57, 26.14],
                },
                ]
            }
        }
    },
    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0);
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 385px;
}
</style>